// 全局样式重置
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

// 注册页面整体样式
#zhuce {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('/public/01.webp'); // 根据实际图片放置路径修改这里的相对路径
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    // 初始加载时设置透明度为0，稍后通过动画显示
    opacity: 0;
    // 沿Y轴向下偏移一定距离，用于动画效果
    transform: translateY(20px);

    // 添加进入页面的动画，持续时间1秒，动画结束后保持最终状态
    animation: fadeInUp 1s forwards;
}

// 定义进入页面的动画关键帧
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// 注册表单盒子样式
.zhubox {
    width: 500px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 100px auto;
    transition: all 1s;

    // 鼠标悬停时添加一些效果，这里可以根据需求自定义
    &:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    // 标题样式
   .zhutitle {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin: 20px 0;
    }

    // 输入框外层样式
   .zhuinput-box {
        width: 500px;
        height: 40px;
        margin: 10px 0;
        border-radius: 5px;
        padding: 0 10px;
        box-sizing: border-box;
        outline: none;
        display: flex;
        align-items: center;
        text-align: center;

        // 输入框获取焦点时的样式
        &:focus-within {
            border-color: blue;
        }

        input {
            width: 70%;
            height: 80%;
            outline: none;
        }
    }

    // 按钮盒子样式
   .zhubtn-box {
        width: 100px;
        height: 30px;
        border: none;
        margin: auto;
    }

    // 初始隐藏的提示信息样式，可根据条件显示
   .xiao {
        display: none;

        // 显示时添加淡入动画
        &.show {
            display: block;
            animation: fadeIn 0.5s;
        }
    }

    // 显示的错误提示信息样式
   .xian {
        display: block;
        color: red;
        font-size: 12px;

        // 错误提示信息出现时添加淡入动画
        &.show {
            animation: fadeIn 0.5s;
        }
    }
}

// 成功提示信息样式
.success-notification {
    position: absolute;
    top: 0;
    left: 50%;
    // 显示时添加淡入动画
    &.show {
        display: block;
        animation: fadeIn 0.5s;
    }
}

.success-notification_xiao {
    // 初始隐藏，根据业务逻辑显示时添加淡入动画
    display: none;
    &.show {
        display: block;
        animation: fadeIn 0.5s;
    }
}

// 错误提示信息样式
.error-notification {
    position: absolute;
    top: 0;
    left: 50%;
    // 显示时添加淡入动画
    &.show {
        display: block;
        animation: fadeIn 0.5s;
    }
}

.error-notification_xiao {
    display: none;

    // // 显示时添加淡入动画
    // &.show {
    //     display: block;
    //     animation: fadeIn 0.5s;
    // }
}

// 定义淡入动画关键帧
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}